<template>
  <div class="hxzzt_wrap">
    <div
      :class="`hxzzt_item ${
        index == hxzztBgColorData.length - 1 ? '' : 'hxzzt_item_border_bottom'
      }`"
      v-for="(hz, index) in hxzztData"
      :key="index"
    >
      <div class="left">
        <div
          class="zBar"
          :style="`width:${hxzztItemWidthFunc(
            hz.num
          )}px;background-color:${hxzztBgColorFunc(index)}`"
        ></div>
        <div class="aBar"></div>
        <span class="numText">{{ `${hz.num}次` }}</span>
      </div>
      <div class="right">
        <span class="ptName">{{ hz.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, computed } from "vue";
export default defineComponent({
  name: "Hxzzt",
});
</script>
<script setup>
// 横向柱状图数据
const hxzztData = ref([
  {
    name: "三门峡入水口1",
    num: 3,
  },
  {
    name: "黄河鲤鱼育苗基地",
    num: 8,
  },
  {
    name: "丹顶鹤水源地",
    num: 15,
  },
  {
    name: "三门峡入水口2",
    num: 2,
  },
  {
    name: "牡丹育种展示基地水源地",
    num: 10,
  },
]);

// 横向柱状图填充颜色数据
const hxzztBgColorData = ref([
  "rgba(175, 249, 255, 1)",
  "rgba(119, 244, 255, 1)",
  "rgba(42, 238, 255, 1)",
  "rgba(55, 184, 255, 1)",
  "rgba(65, 146, 246, 1)",
]);

// 计算横向柱状图填充颜色的函数
const hxzztBgColorFunc = (index) => {
  return hxzztBgColorData.value[index];
};

// 计算横向柱状图每一项宽度的函数
const hxzztItemWidthFunc = (num) => {
  // let tempW = 100 / hxzztData.value[0].num;
  let tempW = 0;
  console.log(hxzztData.value);
  hxzztData.value.forEach((item) => {
    if (item.num > tempW) {
      tempW = item.num;
    }
  });
  return (100 / tempW) * num;
};

// 初始化
onMounted(() => {
  setTimeout(() => {
    // 数据按次数从大到小排序
    hxzztData.value = hxzztData.value.sort((a, b) => {
      return b.num - a.num;
    });
  }, 2000);
});
</script>

<style lang="scss" scoped>
.hxzzt_wrap {
  font-family: "思源黑体";
  // letter-spacing: 1px;
  padding: 10px 10px;
  background: #081a35;
  width: 341px;
  height: 225px;
  display: flex;
  flex-direction: column;
  color: white;
  box-sizing: border-box;

  .hxzzt_item {
    padding: 10px 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;

    .left {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding: 4px 0px 0px 0px;
      // line-height: 21px;
      // height: 42px;
      // line-height: 42px;
      .zBar {
        transition-duration: 0.8s;
        height: 8px;
        width: 100px;
        background: rgba(175, 249, 255, 1);
        margin-right: 3px;
        position: relative;
        top: 2.6px;
      }
      .aBar {
        width: 2px;
        height: 8px;
        background-color: rgba(255, 146, 16, 1);
        margin-right: 4px;
        position: relative;
        top: 2.6px;
      }
      .numText {
        font-size: 10px;
        color: rgba(160, 246, 255, 1);
      }
    }

    .right {
      .ptName {
        font-size: 14px;
      }
    }
  }

  .hxzzt_item_border_bottom {
    border-bottom: 1px dashed rgba(51, 74, 102, 1);
  }
}
</style>
